import { Form, Select, InputNumber, Switch, Radio, Slider, Button, Upload, Rate, Checkbox, Input, Col, Divider } from 'antd';
import { UploadOutlined, InboxOutlined } from '@ant-design/icons';
import { memo } from 'react';
import React, { useState, useEffect } from 'react';
import { set } from 'lodash';
const { Option } = Select;
const formItemLayout = {
    labelCol: {
        span: 6,
    },
    wrapperCol: {
        span: 14,
    },
};

const normFile = (e) => {
    console.log('Upload event:', e);

    if (Array.isArray(e)) {
        return e;
    }

    return e && e.fileList;
};


const xxx = {
    "numberDetectionResult": 2,
    "mobileCheckStatus": [1, 2, 3],
    "mediationCases": [{
        "exten": "8000",
        "mediationDate": 1630574171,
        "mediationId": "P00921090200059",
        "mediationMethod": 3,
        "mediationInfoId": "",
        "mediationOnlineDate": 0,
        "newAddress": { "provinceCode": 0, "cityCode": 0, "areaCode": 0, "detail": "" },
        "nexTime": 0,
        "participants": [2],
        "promiseRepaymentDate": 0,
        "repaymentInfo": [],
        "systemNum": "P00921090200059",
        "caseBasicCourtId": "210902901004003010"
    }]
}
const FormCom = memo(props => {
    const numberRes = [
        { label: '正常在用', value: '正常在用' },
        { label: '停机', value: '停机' },
        { label: '在网但不可用', value: '在网但不可用' },
        { label: '不在网', value: '不在网' },
        { label: '销号', value: '销号' },
        { label: '查无此号', value: '查无此号' }
    ]
    const [checkedList, setCheckedList] = useState(['正常在用']);
    // const [checkAll, setCheckAll] = useState(false);

    const onChange = list => {
        setCheckedList(list);
        // setCheckAll(list.length === numberRes.length);
    };
    const onCheckAllChange = e => {
        setCheckedList(e.target.checked ? numberRes : []);
        // setCheckAll(e.target.checked);
    };

    const selectOtherNum = e => {
        if (e === 'B') {
            setCheckedList(['在网但不可用', '不在网', '销号', '查无此号'])
        } else {
            setCheckedList([])
        }
    }
    return (
        <>
            <Divider />
            <Form
                {...formItemLayout}
                initialValues={{
                    'input-number': 3,
                    rate: 3.5,

                }}
            >
                <Form.Item label="Checkbox.Group" >
                    <Checkbox style={{ display: 'none' }} >
                        Check all ||||||||||||
                    </Checkbox>

                    <Checkbox.Group options={numberRes} value={checkedList} onChange={onChange} />
                    {/* <Checkbox.Group>
                        <Row>
                            {
                                optionsWithDisabled && optionsWithDisabled.map(item => (
                                    <Col key={item.value} span={8}>
                                        <Checkbox
                                            value={item.value}
                                            style={{
                                                lineHeight: '32px',
                                            }}

                                        >
                                            {item.value}
                                        </Checkbox>
                                    </Col>
                                ))
                            }

                        </Row>
                    </Checkbox.Group> */}
                </Form.Item>
                <Form.Item label="Plain Text">
                    {
                        checkedList.map(item => (
                            <div key={item} className="ant-form-text">{item === '' ? '无更新' : item}</div>
                        ))
                    }

                </Form.Item>
                <Form.Item
                    name="select"
                    label="Select"
                    hasFeedback
                    rules={[
                        {
                            required: true,
                            message: 'Please select your country!',
                        },
                    ]}
                >
                    <Select onChange={selectOtherNum} placeholder="Please select a country">
                        <Option value="A">A</Option>
                        <Option value="B">B</Option>
                    </Select>
                </Form.Item>

                <Form.Item
                    name="select-multiple"
                    label="Select[multiple]"
                    rules={[
                        {
                            required: true,
                            message: 'Please select your favourite colors!',
                            type: 'array',
                        },
                    ]}
                >
                    <Select mode="multiple" placeholder="Please select favourite colors">
                        <Option value="red">Red</Option>
                        <Option value="green">Green</Option>
                        <Option value="blue">Blue</Option>
                    </Select>
                </Form.Item>

                <Form.Item label="InputNumber">
                    <Form.Item name="input-number" noStyle>
                        <InputNumber min={1} max={10} />
                    </Form.Item>
                    <span className="ant-form-text"> machines</span>
                </Form.Item>

                <Form.Item name="switch" label="Switch" valuePropName="checked">
                    <Switch />
                </Form.Item>

                <Form.Item name="slider" label="Slider">
                    <Slider
                        marks={{
                            0: 'A',
                            20: 'B',
                            40: 'C',
                            60: 'D',
                            80: 'E',
                            100: 'F',
                        }}
                    />
                </Form.Item>

                <Form.Item name="radio-group" label="Radio.Group">
                    <Radio.Group>
                        <Radio value="a">item 1</Radio>
                        <Radio value="b">item 2</Radio>
                        <Radio value="c">item 3</Radio>
                    </Radio.Group>
                </Form.Item>

                <Form.Item
                    name="radio-button"
                    label="Radio.Button"
                    rules={[
                        {
                            required: true,
                            message: 'Please pick an item!',
                        },
                    ]}
                >
                    <Radio.Group>
                        <Radio.Button value="a">item 1</Radio.Button>
                        <Radio.Button value="b">item 2</Radio.Button>
                        <Radio.Button value="c">item 3</Radio.Button>
                    </Radio.Group>
                </Form.Item>



                <Form.Item name="rate" label="Rate">
                    <Rate />
                </Form.Item>
                <Form.Item name="xxxx" label="xxxx">
                    <Input maxLength={5} />
                </Form.Item>

                <Form.Item
                    name="upload"
                    label="Upload"
                    valuePropName="fileList"
                    getValueFromEvent={normFile}
                    extra="longgggggggggggggggggggggggggggggggggg"
                >
                    <Upload name="logo" action="/upload.do" listType="picture">
                        <Button icon={<UploadOutlined />}>Click to upload</Button>
                    </Upload>
                </Form.Item>

                <Form.Item label="Dragger">
                    <Form.Item name="dragger" valuePropName="fileList" getValueFromEvent={normFile} noStyle>
                        <Upload.Dragger name="files" action="/upload.do">
                            <p className="ant-upload-drag-icon">
                                <InboxOutlined />
                            </p>
                            <p className="ant-upload-text">Click or drag file to this area to upload</p>
                            <p className="ant-upload-hint">Support for a single or bulk upload.</p>
                        </Upload.Dragger>
                    </Form.Item>
                </Form.Item>

                <Form.Item
                    wrapperCol={{
                        span: 12,
                        offset: 6,
                    }}
                >
                    <Button type="primary" htmlType="submit">
                        Submit
                    </Button>
                </Form.Item>
            </Form>
        </>
    )
})
export default FormCom